<template>
  <div class="home-component">
    <h2 class="home-text">welcome here!</h2>
    <chart :info='info' />
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import chart from './component/chart.vue'
@Component({
  name: 'dashboard',
  components: {
    chart
  }
})
export default class extends Vue {
  private info: any[] = [
    { month: '1', total: 100 },
    { month: '2', total: 110 },
    { month: '3', total: 105 },
    { month: '4', total: 180 },
    { month: '5', total: 150 },
    { month: '6', total: 190 },
    { month: '7', total: 200 },
    { month: '8', total: 220 },
    { month: '9', total: 150 },
    { month: '10', total: 175 },
    { month: '11', total: 255 },
    { month: '12', total: 248 }
  ]
}
</script>

<style lang="scss" scoped>
// https://www.cnblogs.com/xjd-6/p/10931061.html
// background-size: cover;
// -webkit-background-size: cover;
// -o-background-size: cover;
// 以上三句让图片随屏幕大小同步缩放，但是有部分可能会被裁剪，不过不至于留白
.home-component{
  width: 100%;
  height: 100%;
  background: url('../../../assets//images//home-bg.jpg') no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  z-index: -1;
  min-width: 800px; // min-width是为了实现让屏幕宽度在800px以内时，大小保持不变，图片不缩放
  opacity: 0.5;
}
.home-text{
  color: #4669F5;
  text-align: center;
  padding-top: 50px;
}
</style>
